<template v-model="updateDialog">
  <div class="register-container">
    <div class="register">
      <div class="nav">
        <div class="register-title">
          <span>{{ form.className }}班注册页面</span>
        </div>
        <div class="register-form">
          <el-form class="demo" :model="form" label-width="auto" ref="formRef" :rules="formRules">
            <div class="register-form-item">
              <el-row :gutter="15">
                <el-col :sm="12" :xs="24">
                  <el-form-item label="真实姓名" prop="name">
                    <el-input v-model="form.name" />
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickname" />
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="性别" prop="gender">
                    <el-radio v-model="form.gender" value="男">男</el-radio>
                    <el-radio v-model="form.gender" value="女">女</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" />
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="教育程度">
                    <el-select v-model="form.education">
                      <el-option label="大专" value="大专" />
                      <el-option label="本科" value="本科" />
                      <el-option label="研究生" value="研究生" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="手机号码" prop="telephone">
                    <el-input v-model="form.telephone"/>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="头像">
                    <el-upload style="border: 1px solid grey;width: 35px;height: 35px;" class="avatar-uploader"
                               :action="axios.defaults.baseURL + '/file/upload'" :show-file-list="false"
                               :on-success="handleAvatarSuccess">
                      <img style="width: 35px;height: 35px;" :src="form.avatar" class="avatar" v-if="form.avatar" alt="" />
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="身份证号" :required="true" prop="idCard">
                    <el-input v-model="form.idCard" />
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="政治面貌">
                    <el-radio v-model="form.politicalOutlook" value="共青团员">共青团员</el-radio>
                    <el-radio v-model="form.politicalOutlook" value="群众">群众</el-radio>
                    <el-radio  v-model="form.politicalOutlook" value="党员">党员</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="生日" >
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        placeholder="选择你的出生日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="地区">
                    <div>
                      <el-cascader v-model="form.nativePlace" placeholder="请选择你的生源地" :options="pcaTextArr"
                                   size="large" />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="详细地址">
                    <el-input v-model="form.address" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="all-btn">
                <el-button type="primary" @click="onSubmit()">注册</el-button>
                <el-button @click="reset()">重置</el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import {ElMessage,ElLoading} from "element-plus";
import axios from "../../../axios/index"
import { useRoute,useRouter } from 'vue-router';
import { onMounted } from 'vue';
import { pcaTextArr } from 'element-china-area-data';

const route = useRoute()
const router = useRouter()
let studentId = ref()

//初始化
onMounted(async ()=>{
  const { classId,className } = route.query
  const formRef = ref()
  form.classId = classId+'',
  form.className = className+''
})


let form = reactive({
  className: '',
  name: '',
  nickname: '',
  gender: '男',
  age: '',
  telephone: '',
  status: '',
  avatar: '',
  classId: '',
  education: '',
  idCard: '',
  birthday: '',
  nativePlace: '',
  politicalOutlook: '',
  address: '',
})

//提交
function onSubmit() {
  axios.post('http://101.37.69.211:8080/student/addStudent', form).then(response => {
    ElMessage({
      message: response.data.message,
      type: response.data.code == 200 ? 'success' : "error",
      duration: 1500,
      onClose: function () {
        //清除表单数据
        reset()
        if (response.data.code == 200) {
          router.push({
            path: '/RegisterScussesView',query: {
                studentId: response.data.data
            }
          })
        }
      }
    })
  })
}

//头像上传处理
function handleAvatarSuccess(response) {
  form.avatar = response.data
}

//重置
function reset() {
      form.name = '',
      form.nickname = '',
      form.age = '',
      form.telephone = '',
      form.avatar = '',
      form.education = '',
      form.idCard = '',
      form.birthday = '',
      form.nativePlace = '',
      form.address = ''
}

//表单校验
const formRules = reactive({
    name: [{ required: true,  minlength: 2, maxlength: 10, pattern: '^[\\u4e00-\\u9fa5]+$', message: '姓名格式不正确,应为2到10个中文字符', trigger: 'blur' }],
    gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    telephone: [{ required: true, pattern: '^1\\d{10}$', message: '手机号码格式不正确', trigger: 'blur' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
    idCard: [{required:true,pattern:'(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)',message:'身份证号格式不正确',trigger: 'blur'}],
    classId: [{ required: true, message: '班级不能为空', trigger: 'blur' }]
})
</script>
<style scoped>
/*整体样式*/
.register-container {
  width: 100%;
  display: flex;
  justify-content: center;
  max-height: 100vh;
  overflow-y: auto;
  background: linear-gradient(158deg, #E0C3FC 30%, #8EC5FC 70%);
  background-size: contain;
}
/*登陆主体部分*/
.register{
  max-height: 100vh;
}

.register-container .register-title {
  text-align: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.register-container .register-title span {
  font-size: 35px;
}

.nav .el-radio:nth-child(1){
  width: 60px;
}
.nav .el-radio:nth-child(2){
  width: 30px;
}

.nav .avatar-uploader {
  --el-upload-dragger-padding-horizontal: 40px;
  --el-upload-dragger-padding-vertical: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*按钮*/
.all-btn {
  text-align: center;
}

.all-btn .el-button {
  margin-left: 12px;
  width: 100px;
}

/*屏幕分辨率大于768px时*/
@media (min-width: 768px) {
  .register-container .register {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(23px);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  .nav .el-row {
    width: 650px;
  }
  .register-container .register-title {
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .register-container .register .nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .register-container .register-form .register-form-item{
    position: relative;
    bottom: 20px;
  }
}

@media (max-height: 550px) {
  .register-container .register .nav {
    margin-top: 42px;
  }
}

/*屏幕分辨率在500px-768px时*/
@media (max-width: 768px) and (min-width: 500px) {
  .nav .el-row {
    height: 100%;
    width: 450px;
  }
  .register-container .register-title {
    margin-bottom: 40px;
    margin-top: 15px;
  }
  .register-container .register-form{
    height: 530px;
  }
  .register-container .register-form .register-form-item{
    position: relative;
    bottom: 20px;
  }
}

/*屏幕分辨率在412px-500px时*/
@media (max-width: 500px) and (min-width: 412px) {
  .nav .el-row {
    height: 100%;
    width: 350px;
  }
  .register-container .register-title {
    margin-bottom: 40px;
    margin-top: 15px;
  }
  .register-container .register-title span {
    font-size: 25px;
  }
  .register-container .register-form{
    height: 500px;
  }
  .register-container .register-form .register-form-item{
    position: relative;
    bottom: 20px;
  }
}

/*屏幕分辨率在340px-412px时*/
@media (max-width: 412px) and (min-width: 340px) {
  .nav .el-row {
    height: 100%;
    width: 300px;
  }
  .register-container .register-title {
    margin-bottom: 35px;
    margin-top: 15px;
  }
  .register-container .register-title span {
    font-size: 25px;
  }
  .register-container .register-form{
    height: 550px;
  }
  .register-container .register-form .register-form-item{
    position: relative;
    bottom: 20px;
  }
}

/*屏幕分辨率在340px-412px时*/
@media (max-width: 340px){
  .nav .el-row {
    height: 100%;
    width: 300px;
  }
  .register-container .register-title {
    margin-bottom: 35px;
    margin-top: 10px;
  }
  .register-container .register-title span {
    font-size: 25px;
  }
  .register-container .register-form{
    height: 550px;
  }
  .register-container .register-form .register-form-item{
    position: relative;
    bottom: 20px;
  }
}
</style>
